<template>
	<view class="invitation">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="邀请好友"></tab-top>
		<!-- #endif -->
		<view class="box-1">
			<image class="box-1-bg" src="/static/bg/invitation.png" mode="widthFix"></image>
			<view class="b1-text">
				奖励无上限 呼朋唤友来注册
			</view>
			<view class="b1-qrcode">
				<qrcode :val="qrval" :size="qrsize" ref="qrcode"></qrcode>
			</view>
			<view class="b1-text1">
				打开微信扫一扫，扫描图中二维码
			</view>
		</view>
		<view class="box-2 uni-clearfix">
			<view class="bonus_notes">
				<view class="reward_text">奖励说明</view>
				<view class="reward_text1 uni-clearfix">
					<view class="reward_icon">1</view>
					<view class="reward_title">将邀请码分享给好友，对方登录操作下单完成后，您即可获得30元现金奖励</view>
				</view>
				<view class="reward_text1 uni-clearfix">
					<view class="reward_icon">2</view>
					<view class="reward_title">此奖励长期有效，没有时间限制</view>
				</view>
				<view class="reward_text1 uni-clearfix">
					<view class="reward_icon">3</view>
					<view class="reward_title">该奖励最终解释权归本公司所有</view>
				</view>
			</view>
		</view>
		<view class="box-2 box-3 uni-clearfix" v-if="friendNum != 0">
			<view class="bonus_notes">
				<view class="reward_text">我的邀请</view>
				<view class="reward_data">
					<view class="reward_frien">
						<view class="reward_frien_1">{{friendNum}}</view>
						<view class="reward_frien_2">共邀请好友</view>
					</view>
					<view class="reward_total">
						<view class="reward_total_1">{{amountNum}}</view>
						<view class="reward_total_2">共获得奖励</view>
					</view>
				</view>


				<view class="reward_list_box">
					<view class="reward_list_box_1">
						<view class="reward_list">
							<view class="reward_list_head">
								<view class="head_box">
									<view class="head_1">好友手机号</view>
									<view class="head_1">奖励金额</view>
									<view class="head_1">获得奖励时间</view>
								</view>

							</view>
							<view class="reward_list_body">
								<view class="reward_item" v-for="(v, i) in list" :key="i">
									<view class="body_1">{{v.nphone}}</view>
									<view class="body_1">&yen; {{v.amount}}</view>
									<view class="body_1">{{v.create_time | dateFrm}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>
		
		<view class="box-2 box-3 uni-clearfix" v-if="friendNum == 0" style="height: 700upx;"> 
			<view class="bonus_notes bonus_notes_0">
				<view class="reward_text">我的邀请</view>
				<view class="reward_data">
					<view class="reward_frien">
						<view class="reward_frien_1">{{friendNum}}</view>
						<view class="reward_frien_2">共邀请好友</view>
					</view>
					<view class="reward_total">
						<view class="reward_total_1">{{amountNum}}</view>
						<view class="reward_total_2">共获得奖励</view>
					</view>
				</view>
				<view class="bonus_line1">
					<image src="/static/icon/bl-line.png" mode=""></image>
				</view>
				<view class="bonus_line2">
					<image src="/static/icon/bl-line.png" mode=""></image>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import qrcode from "@/components/qrcode/qrcode.vue"
	import moment from "moment"
	export default {

		data() {
			return {
				qrval: "暂无邀请码，请稍后重试",//二维码
				qrsize: '500',
				list: [],//数据列表
				friendNum:0,//好友数量
				amountNum:0//总额
			}
		},
		filters:{
			dateFrm:function(time){
				let jsTime = time *1000;
				return moment(jsTime).format('YYYY-MM-DD');
			}
		},
		methods: {
			getData() {
				this.req({
						url: 'both/invite',
						method:'get',
						data: {
							position: this.isLogin().type,
							uid: this.isLogin().id
						}
					},
					(res) => {
						
						if(res.data.status == 1){
							this.qrval	   = res.data.data.list.invite_url;
							this.list 	   = res.data.data.list.data;
							this.friendNum = res.data.data.list.invite_num;
							this.amountNum = res.data.data.list.amount_num;
						}else{
							this.qrval	   = res.data.data.list.invite_url;
						}
						console.log(this.qrval);
					},
					(res) => {
						uni.showToast({
							title:"请稍后重试"
						})
					})
			}
		},
		onLoad() {
			this.getData();
			
		},
		mounted() {
			this.$refs.qrcode.creatQrcode();

		},
		components: {
			qrcode
		}
	}
</script>

<style lang="scss" scoped>
	.invitation {

		.box-1 {
			width: 100vw;
			height: auto;
			font-size: 0;
			background-size: 100% 100%;
			position: relative;

			.box-1-bg {
				width: 100%;
				height: auto;
			}
		}
		.b1-text1{
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 25upx;
			font-size: 20upx;
			line-height: 1;
			text-align: center;
			color: #FFFFFF;
		}
		.b1-text {
			white-space: pre-wrap;
			text-align: center;
			position: absolute;
			width: 100%;
			top: 410upx;
			height: 30upx;
			line-height: 1;
			font-size: 30upx;
			color: #FFF;
		}

		.b1-qrcode {
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			top: 660upx;
			width: 233upx;
			height: 233upx;
			padding: 24upx;
			z-index: 5;
			background: #FFF;
			border-radius: 10upx;
		}

		.box-2 {
			width: 100%;
			display: flex;
			background: -webkit-linear-gradient(left, #4c21d2, #4763f8);
		}

		.bonus_notes {
			position: relative;
			margin: 0 auto;
			width: 698upx;
			height: 416upx;
			border-radius: 16upx;
			background: #FFF;
			margin-top: 50px;
			.bonus_line1,.bonus_line2{
				position: absolute;
				left: -18upx;
				
				width: 90upx;
				height: 8upx;
				image{
					float: left;
					width: 100%;
					height: 100%;
				}
			}
			.bonus_line1{
				top: 37upx;
			}
			.bonus_line2{
				top: 52upx;
			}
		}

		.reward_text {
			width: 322upx;
			height: 53upx;
			text-align: center;
			line-height: 53upx;
			font-size: 28upx;
			color: #FFF;
			
			background: -webkit-linear-gradient(left, #4667f9, #1dc1ff);
			margin: 0 auto;
			border-radius: 53upx;
			margin-top: 58upx;
			margin-bottom: 40upx;
		}

		.reward_text1 {
			width: 539upx;
			margin-left: 70upx;
			margin-top: 25upx;

			.reward_icon {
				float: left;
				width: 44upx;
				height: 44upx;
				background: linear-gradient(#af96fb, #6333f6);
				text-align: center;
				line-height: 44upx;
				border-radius: 50%;
				color: #FFF;
				font-size: 28upx;
			}

			.reward_title {
				margin-left: 16upx;
				margin-top: 12upx;
				color: #5f2ef6;
				width: 479upx;
				font-size: 24upx;
				float: left;
			}
		}

		.box-3 {
			height: 1000upx;

			.bonus_notes {
				height: 573upx;
			}
			.bonus_notes_0 {
				height: 320upx;
			}
			.reward_text {
				margin-top: 60upx;
				background: -webkit-linear-gradient(left, #602ef6, #b945dd);
			}

			.reward_data {
				display: flex;
				margin-top: 58upx;
				justify-content: space-around;
			}

			.reward_frien {
				text-align: center;

				.reward_frien_1 {
					font-size: 48upx;
					line-height: 1;
					color: #5f2ef6;
				}

				.reward_frien_2 {
					font-size: 24upx;
					line-height: 1;
					color: #835cfb;
				}
			}

			.reward_total {
				text-align: center;

				.reward_total_1 {
					font-size: 48upx;
					line-height: 1;
					color: #b845dd;
				}

				.reward_total_2 {
					font-size: 24upx;
					line-height: 1;
					color: #835cfb;
				}
			}

			.reward_list_box {
				width: 600upx;
				margin: 0 auto;
				margin-top: 42upx;
				height: 18upx;
				border-radius: 9upx;
				background: #602ef6;
				position: relative;

				.reward_list_box_1 {
					position: absolute;
					top: 5upx;
					left: 0;
					right: 0;
					background: #835cfb;
					width: 580upx;
					height: 8upx;
					border-radius: 4upx;
					margin: 0 auto;
					position: relative;

					.reward_list {
						position: absolute;
						top: 4upx;
						left: 0;
						right: 0;
						margin: 0 auto;
						width: 560upx;
						background-color: #9e7eff;

						.reward_list_head {
							height: 70upx;
							box-sizing: border-box;
							border-bottom: 1upx dotted #FFF;
							padding-top: 36upx;

							.head_box {

								.head_1 {
									float: left;
									width: 33.33333333%;
									text-align: center;
									line-height: 1;
									font-size: 20upx;
									color: #FFF;
								}
							}
						}

						.reward_list_body {
							box-sizing: border-box;
							padding-top: 30upx;
							max-height: 478upx;
							overflow: auto;

							.reward_item {
								height: 20upx;

								.body_1 {
									float: left;
									width: 33.33333333%;
									text-align: center;
									line-height: 1;
									font-size: 20upx;
									color: #FFF;
								}

								margin-bottom: 34upx;
							}
						}
					}
				}

			}


		}
	}
</style>
